<script>
import UPopup from '@/components/u-popup.vue';

export default {
  components: { UPopup },
  data() {
    return {
      username: '',
      password: '',
      message: '',
      activeName: 'a',
      form: {
        //节点ID(PSN)
        nodeID: '',
        //客户姓名
        customerName: '',
        //客户电话
        customerPhone: '',
        //运营商
        operator: '',
        //所属地区
        area: '',
        //节点分组
        nodeGroup: '',
        //装机地址
        installationAddress: '',
        //备注信息
        remark: '',
      },
      allForm:{
        //设备ID
        nodeID: '',
        //客户姓名
        customerName: '',
        //节点源
        nodeSource: '',
        //类型
        type: '',
        //运营商
        operator: '',
        //地区选择
        area: '',
        //备注信息
        remark: '',
      },
        showSearch: false,
      searchText: '',
      //省份数据
      provinceData: [
        { name: '北京市' },
        { name: '天津市' },
        { name: '河北省' },
        { name: '山西省' },
        { name: '内蒙古自治区' },
        { name: '辽宁省' },
        { name: '吉林省' },
        { name: '黑龙江省' },
        { name: '上海市' },
        { name: '江苏省' },
        { name: '浙江省' },
        { name: '安徽省' },
        { name: '福建省' },
        { name: '江西省' },
        { name: '山东省' },
        { name: '河南省' },
        { name: '湖北省' },
        { name: '湖南省' },
        { name: '广东省' },
        { name: '广西壮族自治区' },
        { name: '海南省' },
        { name: '重庆市' },
        { name: '四川省' },
        { name: '贵州省' },
        { name: '云南省' },
        { name: '西藏自治区' },
        { name: '陕西省' },
        { name: '甘肃省' },
        { name: '青海省' },
        { name: '宁夏维吾尔族自治区' },
        { name: '新疆维吾尔自治区' },
        { name: '台湾省' },
        { name: '香港特别行政区' },
        { name: '澳门特别行政区' }
      ],
      activeArea: ''
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
    },
    closeSearch() {
      this.showSearch = false;
    },
    confirmSearch() {
      this.showSearch = false;
    },
    clickItem(name) {
      console.log(name,'name');
      this.activeArea = name;
    }

  },
  computed: {
    //是否禁止
    disabledStatus() {
      return !this.form.nodeID || !this.form.customerName || !this.form.customerPhone || !this.form.operator || !this.form.area;
    },
    provinceDataFilter() {
      return this.provinceData.filter(item => item.name.includes(this.searchText));
    }
  }
};
</script>

<template>
  <frame-view :class="$theme==='one'?'index':'indexTwo'"  show-tabbar>
    <div style="height: 180px;z-index: 999;position:relative;" v-if="$theme==='one'">
      <img src="./image/bg.png" alt="图片" style="width: 750px;height: 180px" />
      <p style="position: absolute;left: 28px;bottom: 24px;font-weight: 500;font-size: 32px;color: #FFFFFF;">
        绑定设备</p>
    </div>
    <van-tabs class="typeTop" :line-width="50" background=" rgba(0,0,0,0)" :title-inactive-color="$theme==='one'?'#191919':'#fff'" :title-active-color="$theme==='one'?'#191919':'#fff'"
              :color="$theme==='one'?'rgb(15,106,250,.8)':'rgba(7,7,7,0.8)'"
              v-model="activeName">
      <van-tab title="小节点" name="a">
        <div style="padding: 0 20px;margin-top: 20px">
          <div style="background-color: #fff;border-radius: 20px;overflow:hidden;">

            <van-field
              v-model="form.nodeID"
              style="margin-top: 20px"
              name="节点ID(PSN)"
              label-width="8em"
              required
              label="节点ID(PSN)"
              placeholder="节点ID(PSN)"
              input-align="right"
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">

                  &nbsp;<img src="./image/icon@2x.png" style="width: 28px;height: 28px;" />
                </div>
              </template>
            </van-field>

            <van-field
              v-model="form.customerName"
              style="margin-top: 20px"
              name="客户姓名"
              required
              label="客户姓名"
              placeholder="客户姓名"
              input-align="right"
            >
            </van-field>

            <van-field
              v-model="form.customerPhone"
              style="margin-top: 20px"
              name="客户电话"
              label="客户电话"
              required
              placeholder="客户电话"
              input-align="right"
            >
            </van-field>

            <van-field
              v-model="form.operator"
              style="margin-top: 20px"
              name="运营商"
              label="运营商"
              placeholder="请选择"
              input-align="right"
              clickable
              required
              readonly
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">
                  &nbsp;<van-icon name="arrow" color="#D8D8D8" />
                </div>
              </template>
            </van-field>

            <van-field
              v-model="form.area"
              style="margin-top: 20px"
              name="所属地区"
              label="所属地区"
              placeholder="请选择"
              input-align="right"
              clickable
              @click="showSearch = true"
              readonly
              required
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">
                  &nbsp;<van-icon name="arrow" color="#D8D8D8" />
                </div>
              </template>
            </van-field>
          </div>
          <div style="background-color: #fff;border-radius: 20px;overflow:hidden;margin-top: 16px">


            <van-field
              v-model="form.nodeGroup"
              style="margin-top: 20px"
              name="节点分组"
              label="节点分组"
              placeholder="请选择"
              input-align="right"
              clickable
              readonly
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">
                  &nbsp;<van-icon name="arrow" color="#D8D8D8" />
                </div>
              </template>
            </van-field>

            <van-field
              v-model="form.installationAddress"
              style="margin-top: 20px"
              name="装机地址"
              label="装机地址"
              placeholder="请选择"
              input-align="right"
              clickable
              readonly
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">
                  &nbsp;<van-icon name="arrow" color="#D8D8D8" />
                </div>
              </template>
            </van-field>
            <p style="font-size: 28px;padding-left: 32px;color: #646566;margin-top: 40px">备注信息</p>
            <van-field
              class="diyTextarea"
              v-model="form.remark"
              rows="2"
              autosize
              type="textarea"
              label-align="top"
              maxlength="200"
              placeholder="请输入备注信息"
              show-word-limit
              border
            />
          </div>
          <div style="margin: 32px 16px 16px;">
            <van-button :disabled="disabledStatus" round block type="info" native-type="submit">提交</van-button>
          </div>

        </div>
      </van-tab>
      <van-tab title="所有节点" name="b">
        <div style="padding: 0 20px;margin-top: 20px">
          <div style="background-color: #fff;border-radius: 20px;overflow:hidden;">

            <van-field
              v-model="allForm.nodeID"
              style="margin-top: 20px"
              name="设备ID"
              label-width="8em"
              required
              label="设备ID"
              placeholder="设备ID"
              input-align="right"
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">

                  &nbsp;<img src="./image/icon@2x.png" style="width: 28px;height: 28px;" />
                </div>
              </template>
            </van-field>

            <van-field
              v-model="allForm.customerName"
              style="margin-top: 20px"
              name="客户姓名"
              required
              label="客户姓名"
              placeholder="客户姓名"
              input-align="right"
            >
            </van-field>

            <van-field
              v-model="allForm.nodeSource"
              style="margin-top: 20px"
              name="节点源"
              label="节点源"
              required
              placeholder="节点源"
              input-align="right"
            >
            </van-field>

            <van-field
              v-model="allForm.type"
              style="margin-top: 20px"
              name="类型"
              label="类型"
              placeholder="请选择"
              input-align="right"
              clickable
              required
              readonly
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">
                  &nbsp;<van-icon name="arrow" color="#D8D8D8" />
                </div>
              </template>
            </van-field>

            <van-field
              v-model="allForm.operator"
              style="margin-top: 20px"
              name="运营商"
              label="运营商"
              placeholder="请选择"
              input-align="right"
              clickable
              @click="showSearch = true"
              readonly
              required
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">
                  &nbsp;<van-icon name="arrow" color="#D8D8D8" />
                </div>
              </template>
            </van-field>

            <van-field
              v-model="allForm.area"
              style="margin-top: 20px"
              name="地区选择"
              label="地区选择"
              placeholder="请选择"
              input-align="right"
              clickable
              @click="showSearch = true"
              readonly
              required
            >
              <template #extra>
                <div style="display: flex;align-items: center;margin-left: 4px">
                  &nbsp;<van-icon name="arrow" color="#D8D8D8" />
                </div>
              </template>
            </van-field>
          </div>
          <div style="background-color: #fff;border-radius: 20px;overflow:hidden;margin-top: 16px">
            <p style="font-size: 28px;padding-left: 32px;color: #646566;margin-top: 40px">备注信息</p>
            <van-field
              class="diyTextarea"
              v-model="allForm.remark"
              rows="2"
              autosize
              type="textarea"
              label-align="top"
              maxlength="200"
              placeholder="请输入备注信息"
              show-word-limit
              border
            />
          </div>
          <div style="margin: 32px 16px 16px;">
            <van-button :disabled="disabledStatus" round block type="info" native-type="submit">提交</van-button>
          </div>

        </div>

      </van-tab>
    </van-tabs>
    <u-popup :show="showSearch" title="选择地区" @close="closeSearch" @confirm="confirmSearch">
        <van-search class="blackSearch" :clearable="false" shape="round" v-model="searchText"
                    placeholder="请输入分组名称"
                    style="width: 678px;height: 68px;margin-left: 32px;font-size: 26px;margin-top: 25px" />
      <div style="height: 50vh;overflow: auto;padding-left: 20px">
          <van-cell :title="item.name" :class="{bold:activeArea==item.name}" @click="clickItem(item.name)" v-for="item in  provinceDataFilter"/>


      </div>
    </u-popup>

  </frame-view>
</template>

<style scoped lang="scss">
:deep(.van-form .van-field__control) {
  border: none;
}

:deep(.van-field__label) {
  display: flex;
  align-items: center;
}

.line {
  width: 640px;
  height: 1px;
  background-color: #b4b4b4;
  margin: auto;
}

:deep(.frame-view-content) {
  padding: 0 !important;
}

.typeTop {
  padding: 20px 0 40px;

  :deep(.van-tabs__line) {
    top: 46px !important;
  }
}
.blackSearch{
  :deep(.van-search__content--round){
    background-color: #f5f5f5;
  }
}
.bold{
  font-weight: bold;
}
.indexTwo{
  background: linear-gradient( 180deg, #1A9988 0%, #F7F7F7 30%) no-repeat;
  padding-top: 50px;
}
</style>
